<template>
	<view id="app">
		<view class="container df fdc">
			<view class="ptb20 bgw f28 c666 pl20">
				案例封面图
			</view>
			<view class="ver bgw pb20">
				<uv-upload
					:fileList="fileList1"
					name="1"
					multiple
					:deletable="false"
					:maxCount="1"
					@afterRead="afterRead"
					width="300rpx"
					height="200rpx"
				></uv-upload>
			</view>
			<view class="rows bgw ptb20 bdb1s brcce">
				<view class="f28 c666 pl20">项目标题</view>
				<view class="f1 pr15">
					<uv-input placeholder="请输入案例项目标题" border="none"  v-model="cases.title" inputAlign="right"></uv-input>
				</view>
			</view>
			<view class="rows bgw ptb20 bdb1s brcce">
				<view class="f28 c666 pl20">使用瓷砖胶品牌</view>
				<view class="f1" @click="openAdhesive">
					<uv-input placeholder="请选择品牌"  inputAlign="right" disabled disabledColor="#fff" border="none" v-model="adhesiveTxt" suffixIcon="arrow-right" ></uv-input>
				</view>
			</view>
			<view class="rows bgw ptb20 bdb1s brcce">
				<view class="f28 c666 pl20">使用瓷砖/岩板品牌</view>
				<view class="f1" @click="opentile">
					<uv-input placeholder="请选择品牌"  inputAlign="right" disabled disabledColor="#fff" border="none" v-model="tileTxt" suffixIcon="arrow-right" ></uv-input>
				</view>
			</view>
			<view class="ptb20 bgw f28 c666 pl20">
				案例封面图
			</view>
			<view class="bgw pb15 pl15">
				<uv-upload
				:fileList="fileList2"
				name="2"
				multiple
				:maxCount="12"
				@afterRead="afterRead"
				@delete="deletePic"
				></uv-upload>
			</view>
		</view>
		<view class="df fdc aic mt20">
			<view class="btn">
				<uv-button color="#145cfe" iconColor="#fff" @click="submitCase()" text="提交案例"></uv-button>
			</view>
		</view>
		<uv-picker ref="adhesive" :columns="adhesive" keyName="title" @confirm="adhesiveconfirm"></uv-picker>
		<uv-picker ref="tile" :columns="tile" keyName="title" @confirm="tileconfirm"></uv-picker>
	</view>
</template>

<script>
	let that;
	export default {
		data() {
			return {
				adhesive:[],
				tile:[],
				fileList1:[],
				fileList2:[],
				adhesiveTxt:"",
				tileTxt:"",
				cases:{
					thumb:"",
					title:"",
					images:"",
					ceramic_adhesive_id:"",
					ceramic_tile_id:""
				}
			}
		},
		onLoad(){
			that = this;
			this.getadhesive();
			this.gettile();
		},
		methods: {
			submitCase:function(){
				if(this.fileList1.length == 0){
					this.alert('请上传封面')
					return false;
				}
				if(this.cases.title == ''){
					this.alert('请填写案例项目标题')
					return false;
				}
				if(this.cases.ceramic_adhesive_id == ''){
					this.alert('请选择品牌')
					return false;
				}
				if(this.cases.ceramic_tile_id == ''){
					this.alert('请选择品牌')
					return false;
				}
				if(this.fileList2.length == 0){
					this.alert('请上传案例图')
					return false;
				}
				this.cases.thumb = this.fileList1[0].url;
				let images = [];
				this.fileList2.map((item)=>{
					console.log(item);
					images.push(item.url);
				});
				this.cases.images =images.join(',');
				this.request({
					url:"/api/user/cases",
					data:this.cases,
					success:function(rlt){
						if(rlt.code == 200){
							that.tile = rlt.data;
						}
					}
				})
			},
			getadhesive:function(){
				this.request({
					url:"/api/user/adhesive",
					success:function(rlt){
						if(rlt.code == 200){
							that.adhesive = rlt.data;
							console.log(that.adhesive);
						}
					}
				})
			},
			gettile:function(){
				this.request({
					url:"/api/user/tile",
					success:function(rlt){
						if(rlt.code == 200){
							that.tile = rlt.data;
						}
					}
				})
			},
			openAdhesive(){
				this.$refs.adhesive.open();
			},
			opentile(){
				this.$refs.tile.open();
			},
			adhesiveconfirm(e){
				console.log(e);
				this.adhesiveTxt = e.value[0].title;
				this.cases.ceramic_adhesive_id = e.value[0].id;
			},
			tileconfirm(e){
				console.log(e);
				this.tileTxt = e.value[0].title;
				this.cases.ceramic_tile_id = e.value[0].id;
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					let res = await this.getToken(lists[i].url);
					const result = await this.uploadfile(lists[i].url,res)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadfile:function(url,res){
				return new Promise((resolve, reject) => {
					let imgurl = '';
					this.qnUpload.upload(url,function(rlt){
						imgurl = rlt.imageURL
						
					},function(e){
					},{
						region: 'NCN',
						uptoken: res.data.token,
						key:res.data.filename,
					});
					setTimeout(() => {
						resolve(res.data.cdnurl+imgurl);
					}, 1000)
				})
			},
			getToken(e){
				console.log(e);
				return this.request({url:"/api/common/qntoken",data:{'file':e}});
			},
		}
	}
</script>

<style lang="less" scoped>
.btn{width:480rpx;}
</style>

